<template>
	<view>
		<image class="return-icon"
			src="https://dnsverify.pfmoto.com/appstatic/img/my/my_personal_return_white.png"
			@click.stop="goBack"></image>


		<camera flash="off" style="width: 100%; height: 100%;position:fixed;top:0;left:0;"></camera>
		<view class="videBtn" @touchstart="handleTouchStart" @touchend="handleTouchEnd" @longpress="handleLongPress">
			<circleProgressBar ref="proshuju" size='200' border_width="10" border_color_custom="#EA5404">
			</circleProgressBar>
		</view>



		<video v-show="showvideoQ" :src="videoURL" :autoplay="true" :controls="false" :show-fullscreen-btn="false"
			:show-play-btn="false" :enable-progress-gesture="false" :loop="true"
			style="width: 100%; height: 100%;position:fixed;top:0;z-index:10;left:0;">
			<view class="cancel" @click="reTake">取消</view>
			<view class="save" @click="saveUrl">保存</view>
		</video>



		<view v-if="showImageQ==true" style="width: 100%; height: 100%;position:fixed;top:0;z-index:10;left:0;">
			<movable-area scale-area>
				<movable-view direction="all" scale="true" scale-min="1" scale-max="4" :scale-value="scale">
					<image :src="imgURL" style="width: 100%; height: 100%;position:fixed;top:0;z-index:10;left:0;">
				</movable-view>
			</movable-area>
			<view class="cancel" @click="reTake">取消</view>
			<view class="save" @click="saveUrl">保存</view>
		</view>

	</view>
</template>



<!-- 


 -->
<script>
	const app = getApp();
	import circleProgressBar from '@/components/circle-progress-bar/circle-progress-bar.vue'
	export default {
		data() {
			return {
				disabled: false,
				isAuth: false,

				deflautWidth: 0,
				progressData: 0,
				timer: 0,
				starttime: 0,
				endtime: 0,


				videoURL: '',
				showvideoQ: false,

				imgURL: '',
				showImageQ: false,

				scale: 0.5
			}
		},
		components: {
			circleProgressBar
		},
		onLoad(data) {
			// this.getJurisdiction()
		},
		onShow() {
			this.showvideo()
		},
		methods: {

			//返回
			goBack: function() {
				wx.navigateBack({
					delta: 1
				})
			},
			//重新照
			reTake: function() {
				this.showImageQ = false
				this.imgURL = ''
				this.showvideoQ = false
				this.videoURL = ''


				this.deflautWidth = 0
				this.progressData = 0
				this.timer = 0
				this.starttime = 0
				this.endtime = 0
				this.$refs.proshuju.setPro(this.progressData)
			},
			//保存拍摄url
			saveUrl: function() {
				let pages = getCurrentPages(); //获取跳转的所有页面
				let nowPage = pages[pages.length - 1]; //当前页
				let prevPage = pages[pages.length - 2]; //上一页
				prevPage.$vm //上一页的this

				var url = ''
				if (this.videoURL != '') {
					url = this.videoURL
					prevPage.$vm.urlType="video"
				} else if (this.imgURL != '') {
					url = this.imgURL
					prevPage.$vm.urlType="img"
				}
				prevPage.$vm.url = url
				uni.navigateBack({
					delta: 1
				});
			},
			//展示拍摄界面
			showvideo() {
				this.$refs.proshuju.setPro(this.progressData)
			},
			// //touch start 手指触摸开始
			handleTouchStart(e) {
				this.starttime = e.timeStamp;
				console.log(" startTime = " + e.timeStamp);
				console.log(" 手指触摸开始 ", e);
				console.log(" this ", this);
			},
			//touch end 手指触摸结束
			handleTouchEnd(e) {
				console.log(" e++ ", this);
				clearInterval(this.timer);
				this.deflautWidth = 0
				this.endtime = e.timeStamp;
				this.stopShootVideo();
				console.log(" 手指触摸结束 ", e);
				//判断是点击还是长按 点击不做任何事件，长按 触发结束录像
				if (this.endtime - this.starttime > 350) {
					//长按操作 调用结束录像方法
					this.stopShootVideo();
				} else {
					//短按拍照
					this.takePhoto()
				}
			},


			//  长按按钮 - 录像
			handleLongPress(e) {
				console.log("endTime - startTime = " + (this.endtime - this.starttime));
				console.log("长按");
				// 长按方法触发，调用开始录像方法
				this.startShootVideo();
			},

			//录制视频start
			startShootVideo() {
				let index = 0;
				let that = this
				that.deflautWidth = 0
				this.timer = setInterval(() => { //注意箭头函数！！   15秒视频
					if (that.deflautWidth != 100) {
						index += 1;
						that.deflautWidth = index
						that.progressData = index / 100
						console.log(that.progressData + "+++++++++++")
						that.$refs.proshuju.setPro(that.progressData)
					} else if (that.deflautWidth == 100) {
						clearInterval(this.timer);
						this.progressData = 1
						that.$refs.proshuju.setPro(that.progressData)
						this.stopShootVideo();
					}
				}, 150);

				console.log("========= 调用开始录像 ===========")
				this.cameraContext = uni.createCameraContext();
				this.cameraContext.startRecord({
					success: res => {
						console.log("录像成功")
						console.log(res)
					}
				});
			},
			//结束录像 
			stopShootVideo() {
				console.log("========= 调用结束录像 ===========")
				this.cameraContext = uni.createCameraContext();
				this.cameraContext.stopRecord({
					success: res => {
						console.log('结束videoSrc')
						this.videoURL = res.tempVideoPath;
						this.showvideoQ = true

						this.deflautWidth = 0
						this.progressData = 0
						this.timer = 0
						this.starttime = 0
						this.endtime = 0
						this.$refs.proshuju.setPro(this.progressData)
					}
				});
			},


			// 点击拍照
			takePhoto: function() {
				const ctx = uni.createCameraContext();
				ctx.takePhoto({
					quality: 'high',
					success: (res) => {
						var imgs = [res.tempImagePath];
						this.imgURL = imgs
						this.showImageQ = true
					}
				});
			},



		}
	}
</script>

<style>
	.return-icon {
		width: 24px;
		height: 24px;
		position: absolute;
		margin: 8px;
		top: 40px;
		z-index: 100;
	}



	.u-progress-content {
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.u-progress-dot {
		width: 16rpx;
		height: 16rpx;
		border-radius: 50%;
		background-color: #fb9126;
	}

	.u-progress-info {
		font-size: 28rpx;
		padding-left: 16rpx;
		letter-spacing: 2rpx;
		coler: #fb9126;
	}




	.video_box {
		margin-right: 20rpx;
		margin-top: 20rpx;
	}

	.video_image image {
		width: 200rpx;
		height: 200rpx;
		margin-top: 20rpx;
		margin-left: 10rpx;
	}

	.Voice_box {
		display: flex;
		align-items: center;
		flex-wrap: wrap;
		margin-top: 15px;
		padding-bottom: 15px;
	}



	.videoConten {
		display: flex;
		align-items: center;
	}

	.showvideo {
		width: 200rpx;
		height: 200rpx;
	}

	.videBtn {
		position: fixed;
		bottom: 20rpx;
		left: 50%;
		transform: translateX(-50%);
		width: 200rpx;
		height: 200rpx;
		border-radius: 50%;
		font-size: 35rpx;
		// color: green;
		text-align: center;
		line-height: 190rpx;
		// border: 7rpx solid green;
		// background:rgba(0,0,0,0);
		z-index: 10;
		padding: 0;
		margin: 0;

		// background-color: #EA5404;
	}

	.progressStyle {
		position: fixed;
		top: 0rpx;
		left: 0rpx;
		z-index: 11;
		width: 100%;
		background-color: blue;
	}

	/* 上传视频 */

	.save {
		font-family: 'PingFang SC';
		font-style: normal;
		font-weight: 400;
		font-size: 18px;
		line-height: 30px;
		display: inline-block;
		width: 60px;
		height: 30px;
		color: #ffffff;
		text-align: center;
		border: 2rpx solid #ffffff;
		border-radius: 4rpx;

		position: absolute;
		bottom: 110rpx;
		right: 16px;

		z-index: 100;
	}


	.cancel {
		font-family: 'PingFang SC';
		font-style: normal;
		font-weight: 400;
		font-size: 18px;
		line-height: 30px;
		display: inline-block;
		width: 60px;
		height: 30px;
		color: #ffffff;
		text-align: center;
		border: 2rpx solid #ffffff;
		border-radius: 4rpx;

		position: absolute;
		bottom: 110rpx;
		right: 92px;

		z-index: 100;
	}

	movable-view {
		display: flex;
		align-items: center;
		justify-content: center;
		width: 100%;
		height: 100%;
	}

	movable-area {
		height: 100%;
		width: 100%;
		position: fixed;
		overflow: hidden;
	}

	movable-view image {
		width: 100%;
	}
</style>
